<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="./../template/WorkspaceTemplate.xhtml">

    <ui:define name="top">
        
    </ui:define>

    <ui:define name="left">
    </ui:define>

    <ui:define name="right">
        
    </ui:define>

    <ui:define name="content">

        <h:form id="salesLeadForm">

            <h2>Update Sales Lead</h2>
            <br/>
            <p:messages showDetail="true"/>
            <p:panel id="panel1" header="Basic Information">
                <h:panelGrid columns="5" cellpadding="10">
                    <h:outputLabel style="font-weight: bold" value="Client ID: "/>
                    <h:outputLabel style="font-weight: bold" value="Company Name: "/>
                    <h:outputLabel style="font-weight: bold" value="Category: "/>
                    <h:outputLabel style="font-weight: bold" value="Customer Executive: "/>
                    <h:outputLabel style="font-weight: bold" value=""/>
                    <h:outputText id="clientId" value="#{salesLeadManagerBean.salesLead.clientId}"/>
                    <p:inputText id="companyName" value="#{salesLeadManagerBean.salesLead.companyName}" label="Company Name"/>
                    <h:selectOneRadio id="category" value="#{salesLeadManagerBean.salesLead.category}" label="Category">   
                        <f:selectItem itemLabel="Direct Sale" itemValue="DirectSale" />
                        <f:selectItem itemLabel="Wholesale" itemValue="WholeSale" />
                    </h:selectOneRadio>
                    <h:outputText id="customerExecutive" value="#{salesLeadManagerBean.salesLead.customerExecutive.firstName} #{salesLeadManagerBean.salesLead.customerExecutive.lastName}"/>
                    <p:commandButton update="salesLeadForm" oncomplete="ceDialog.show()" image="ui-icon ui-icon-search"/>
                </h:panelGrid>
            </p:panel>
            <br/>
            <p:panel id="panel2" header="Contact Information">
                <p:dataTable var="cr" value="#{salesLeadManagerBean.salesLead.contactRecords}" emptyMessage="No contact records added yet.">  
                    <p:column>  
                        <f:facet name="header">  
                            Name
                        </f:facet>  
                        <h:outputText value="#{cr.name}" />  
                    </p:column>  

                    <p:column>  
                        <f:facet name="header">  
                            Designation
                        </f:facet>  
                        <h:outputText value="#{cr.jobTitle}" />  
                    </p:column>  

                    <p:column>  
                        <f:facet name="header">  
                            Phone
                        </f:facet>  
                        <h:outputText value="#{cr.phone}" />  
                    </p:column>  

                    <p:column>  
                        <f:facet name="header">  
                            E-mail
                        </f:facet>  
                        <h:outputText value="#{cr.email}" />  
                    </p:column>

                    <p:column style="width:75px">
                        <p:commandButton update=":updateContactRecordForm" oncomplete="updateCRDialog.show()" image="ui-icon ui-icon-pencil" title="Update" actionListener="#{salesLeadManagerBean.updateContactRecordBackup}">
                            <f:attribute value="#{cr}" name="selectedContactRecord" />
                        </p:commandButton>
                        <p:commandButton update="salesLeadForm" oncomplete="confirmationCR.show()" image="ui-icon ui-icon-close" title="Delete">
                            <f:setPropertyActionListener value="#{cr}" target="#{salesLeadManagerBean.contactRecord}" />          
                        </p:commandButton>
                    </p:column>
                </p:dataTable>
                <br/>
                <div align="center">
                    <p:commandButton value="Add Contact Record" oncomplete="addCRDialog.show();" update=":addContactRecordForm"/>
                </div>
            </p:panel>
            <br/>
            <p:panel id="panel3" header="Shipping Address">
                <p:dataTable rowIndexVar="rowIndex" var="sa" value="#{salesLeadManagerBean.salesLead.shippingAddress}" emptyMessage="No shipping address added yet." style="border-color: transparent">
                    <p:column style="border-color: transparent">
                        <p:fieldset legend="Shipping Address #{rowIndex + 1}" style="font-weight: bold">
                            <h:panelGrid columns="2" style="border-color: transparent" width="100%">

                                <h:outputLabel value="Address Line 1: "/>
                                <h:outputText value="#{sa.addressLine1}"/>

                                <h:outputLabel value="Address Line 2: "/>
                                <h:outputText value="#{sa.addressLine2}"/>

                                <h:outputLabel value="Zip Code: "/>
                                <h:outputText value="#{sa.zipCode}"/>

                                <h:outputLabel value="City: "/>  
                                <h:outputText value="#{sa.city}"/>

                                <h:outputLabel value="State: "/>
                                <h:outputText value="#{sa.stateName}"/>

                                <h:outputLabel value="Country: "/>
                                <h:outputText value="#{sa.country}"/>

                            </h:panelGrid>
                        </p:fieldset>
                        <br/>
                        <div align="right">
                            <p:commandButton value="Update" update="updateSAForm" oncomplete="updateSADialog.show()" image="ui-icon ui-icon-pencil" title="Update" actionListener="#{salesLeadManagerBean.updateShippingAddressBackup}">
                                <f:attribute value="#{sa}" name="selectedShippingAddress" />  
                            </p:commandButton>
                            <p:commandButton value="Delete" update="salesLeadForm" oncomplete="confirmationSA.show()" image="ui-icon ui-icon-close" title="Delete">
                                <f:setPropertyActionListener value="#{sa}" target="#{salesLeadManagerBean.shippingAddress}" />            
                            </p:commandButton>
                            <br/>
                        </div>

                    </p:column>


                </p:dataTable>
                <br/>
                <div align="center">
                    <p:commandButton value="Add Shipping Address" oncomplete="addSADialog.show();" update=":addSAForm"/>
                </div>
            </p:panel>
            <br/>
            <p:panel id="panel4" header="Industry Information (Optional)">
                <h:panelGrid columns="2" cellpadding="10">
                    <h:outputLabel for="industry" value="Industry Sector: "/>
                    <h:selectOneMenu id="industry" value="#{salesLeadManagerBean.salesLead.industry}">
                        <f:selectItem itemLabel="-- Select One --" itemValue="" />
                        <f:selectItem itemLabel="Supermarket" itemValue="Supermarket" />
                        <f:selectItem itemLabel="Dining Restaurant" itemValue="Dining Restaurant" />
                        <f:selectItem itemLabel="Fast Food Restaurant" itemValue="Fast Food Restaurant" />
                        <f:selectItem itemLabel="Hotel" itemValue="Hotel" />
                        <f:selectItem itemLabel="Hospital" itemValue="Hospital" />
                        <f:selectItem itemLabel="Education Institution" itemValue="Education Institution" />
                        <f:selectItem itemLabel="Gym" itemValue="Gym" />
                        <f:selectItem itemLabel="Corporates" itemValue="Corporates" />
                    </h:selectOneMenu>
                </h:panelGrid>
            </p:panel>
            <br/>
            <div align="right">
                <p:commandButton id="save" value="Save" ajax="false" action="#{salesLeadManagerBean.createSalesLead()}"
                                 image="ui-icon ui-icon-disk" update="panel,display"/>
                <p:commandButton id="cancel" value="Cancel" ajax="false" action="#{salesLeadManagerBean.viewAllSalesLead}"/>
            </div>
        </h:form>

        <p:dialog id="addContactRecordDialog" header="Add Contact Record" widgetVar="addCRDialog" modal="true" showEffect="fade" hideEffect="fade" width="500" resizable="false" closable="false">  
            
            <h:form id="addContactRecordForm">
                <p:messages showDetail="true"/>
                <h:panelGrid columns="2" style="margin-bottom:10px">  
                    <h:outputLabel for="name" value="Name:" />  
                    <p:inputText id="name" size="50" value="#{salesLeadManagerBean.contactRecord.name}" />

                    <h:outputLabel for="designation" value="Designation:" />  
                    <p:inputText id="designation" size="50" value="#{salesLeadManagerBean.contactRecord.jobTitle}" />

                    <h:outputLabel for="phone" value="Phone:" />  
                    <p:inputMask id="phone" value="#{salesLeadManagerBean.contactRecord.phone}" mask="(999)999-9999"/>

                    <h:outputLabel for="email" value="E-mail:" />  
                    <p:inputText size="50" id="email" value="#{salesLeadManagerBean.contactRecord.email}"/>  
                </h:panelGrid>
                <br/>
                <p:commandButton value="Add Contact" actionListener="#{salesLeadManagerBean.addContactRecord()}" update="salesLeadForm addContactRecordForm" oncomplete="handleAddContactRecord(xhr, status, args)" image="ui-icon ui-icon-check"/>
                <p:commandButton value="Cancel" actionListener="#{salesLeadManagerBean.resetContactRecord()}" update="salesLeadForm addContactRecordForm" onclick="addCRDialog.hide()" image="ui-icon ui-icon-close"/>
            </h:form>
        </p:dialog>
        
        <script type="text/javascript">  
            function handleAddContactRecord(xhr, status, args) {  
                if(!args.valid) {  
                    jQuery('#addContactRecordDialog').parent().effect("shake", { times:3 }, 100);
                } else {  
                    addCRDialog.hide();
                }  
            }  
        </script>

        <p:dialog id="updateContactRecordDialog" header="Update Contact Record" widgetVar="updateCRDialog" modal="true" showEffect="fade" hideEffect="fade" width="500" resizable="false" closable="false">  
            <h:form id="updateContactRecordForm">           
                <p:messages showDetail="true"/>
                <h:panelGrid id="panelUpdateCR" columns="2" style="margin-bottom:10px">  
                    <h:outputLabel for="updateCRName" value="Name:" />  
                    <p:inputText id="updateCRName" size="50" value="#{salesLeadManagerBean.contactRecord.name}" />

                    <h:outputLabel for="updateCRDesignation" value="Designation:" />  
                    <p:inputText id="updateCRDesignation" size="50" value="#{salesLeadManagerBean.contactRecord.jobTitle}" />

                    <h:outputLabel for="updateCRPhone" value="Phone:" />  
                    <p:inputMask id="updateCRPhone" value="#{salesLeadManagerBean.contactRecord.phone}" mask="(999)999-9999"/>

                    <h:outputLabel for="updateCREmail" value="E-mail:" />  
                    <p:inputText size="50" id="updateCREmail" value="#{salesLeadManagerBean.contactRecord.email}" />  
                </h:panelGrid>
                <br/>
                <p:commandButton value="Update Contact" actionListener="#{salesLeadManagerBean.updateContactRecord}" update="salesLeadForm updateContactRecordForm" oncomplete="handleUpdateContactRecord(xhr, status, args)" image="ui-icon ui-icon-check"/>
                <p:commandButton value="Cancel" actionListener="#{salesLeadManagerBean.resetContactRecord}" update="salesLeadForm updateContactRecordForm" onclick="updateCRDialog.hide()" image="ui-icon ui-icon-close"/>
            </h:form>
        </p:dialog>

        <script type="text/javascript">  
            function handleUpdateContactRecord(xhr, status, args) {  
                if(!args.valid) {  
                    jQuery('#updateContactRecordDialog').parent().effect("shake", { times:3 }, 100);
                } else {
                    updateCRDialog.hide();
                }  
            }  
        </script>

        <p:confirmDialog message="Delete contact record?" width="200"  
                         showEffect="explode" hideEffect="explode"  
                         header="Confirm" severity="alert" widgetVar="confirmationCR" closable="false">  
            <h:form id="confirmCRDialog">
                <p:commandButton value="Yes" update="salesLeadForm" actionListener="#{salesLeadManagerBean.deleteContactRecord}" oncomplete="confirmationCR.hide()"/>  
                <p:commandButton value="No" onclick="confirmationCR.hide()" />  
            </h:form>
        </p:confirmDialog>

        <p:dialog id="addShippingAddressDialog" header="Add Shipping Address" widgetVar="addSADialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" width="800" closable="false">
            <h:form id="addSAForm">
                <p:messages showDetail="true"/>
                <h:panelGrid columns="2" style="border-color: transparent" width="100%">

                    <h:outputLabel value="Address Line 1: "/>
                    <p:inputText size="80" value="#{salesLeadManagerBean.shippingAddress.addressLine1}" label="Shipping Address Line 1"/>

                    <h:outputLabel value="Address Line 2: "/>
                    <p:inputText size="80" value="#{salesLeadManagerBean.shippingAddress.addressLine2}" label="Shipping Address Line 2"/>

                    <h:outputLabel value="Zip Code: "/>
                    <p:inputMask size="6" value="#{salesLeadManagerBean.shippingAddress.zipCode}" mask="999999" label="Zip Code"/>

                    <h:outputLabel value="City: "/>  
                    <p:inputText size="20" value="#{salesLeadManagerBean.shippingAddress.city}" label="City"/>

                    <h:outputLabel value="State: "/>
                    <p:inputText size="20" value="#{salesLeadManagerBean.shippingAddress.stateName}" label="State"/>


                    <h:outputLabel value="Country: "/>
                    <p:inputText size="20" value="#{salesLeadManagerBean.shippingAddress.country}" label="Country"/>

                </h:panelGrid>
                <br/>           
                <p:commandButton value="Add" actionListener="#{salesLeadManagerBean.addShippingAddress()}" update="salesLeadForm addSAForm" oncomplete="handleAddShippingAddress(xhr, status, args)" image="ui-icon ui-icon-check"/> 
                <p:commandButton value="Cancel" actionListener="#{salesLeadManagerBean.resetShippingAddress()}" update="salesLeadForm addSAForm" onclick="addSADialog.hide()" image="ui-icon ui-icon-close"/>  
            </h:form>
        </p:dialog>
        
        <script type="text/javascript">  
            function handleAddShippingAddress(xhr, status, args) {  
                if(!args.valid) {  
                    jQuery('#addShippingAddressDialog').parent().effect("shake", { times:3 }, 100);
                } else {
                    addSADialog.hide();
                }  
            }  
        </script>

        <p:dialog id="updateShippingAddressDialog" header="Update Shipping Address" widgetVar="updateSADialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" width="800" closable="false">
            <h:form id="updateSAForm">
                <p:messages showDetail="true"/>
                <h:panelGrid columns="2" style="border-color: transparent" width="100%">

                    <h:outputLabel value="Address Line 1: "/>
                    <p:inputText size="80" value="#{salesLeadManagerBean.shippingAddress.addressLine1}" label="Shipping Address Line 1"/>

                    <h:outputLabel value="Address Line 2: "/>
                    <p:inputText size="80" value="#{salesLeadManagerBean.shippingAddress.addressLine2}" label="Shipping Address Line 2"/>

                    <h:outputLabel value="Zip Code: "/>
                    <p:inputMask size="5" value="#{salesLeadManagerBean.shippingAddress.zipCode}" mask="999999" label="Zip Code"/>

                    <h:outputLabel value="City: "/>  
                    <p:inputText size="20" value="#{salesLeadManagerBean.shippingAddress.city}" label="City"/>

                    <h:outputLabel value="State: "/>
                    <p:inputText size="20" value="#{salesLeadManagerBean.shippingAddress.stateName}" label="State"/>


                    <h:outputLabel value="Country: "/>
                    <p:inputText size="20" value="#{salesLeadManagerBean.shippingAddress.country}" label="Country"/>

                </h:panelGrid>
                <br/>           
                <p:commandButton value="Update" actionListener="#{salesLeadManagerBean.updateShippingAddress()}" update="salesLeadForm updateSAForm" oncomplete="handleUpdateShippingAddress(xhr, status, args)" image="ui-icon ui-icon-check"/> 
                <p:commandButton value="Cancel" actionListener="#{salesLeadManagerBean.resetShippingAddress()}" update="salesLeadForm updateSAForm" onclick="updateSADialog.hide()" image="ui-icon ui-icon-close"/>  
            </h:form>
        </p:dialog>
        
        <script type="text/javascript">  
            function handleUpdateShippingAddress(xhr, status, args) {  
                if(!args.valid) {  
                    jQuery('#updateShippingAddressDialog').parent().effect("shake", { times:3 }, 100);
                } else {
                    updateSADialog.hide();
                }  
            }  
        </script>

        <p:confirmDialog message="Delete shipping address?" width="200"  
                         showEffect="explode" hideEffect="explode"  
                         header="Confirm" severity="alert" widgetVar="confirmationSA" closable="false">  
            <h:form id="confirmSADialog">
                <p:commandButton value="Yes" update="salesLeadForm" actionListener="#{salesLeadManagerBean.deleteShippingAddress}" oncomplete="confirmationSA.hide()"/>  
                <p:commandButton value="No" onclick="confirmationSA.hide()" type="button" />  
            </h:form>
        </p:confirmDialog>

        <p:dialog header="Search Customer Executive" widgetVar="ceDialog" showEffect="fade" hideEffect="fade" height="600" width="800" closable="false">
            <h:form id="ceForm">           
                <p:dataTable var="ce" value="#{ceManagerBean.allCustomerExecutives}" emptyMessage="No customer executive found with given criteria"  selection="#{salesLeadManagerBean.newCE}" selectionMode="single">

                    <f:facet name="header">
                        <p:outputPanel>
                            <h:outputText value="Search all fields:" />
                            <p:inputText id="globalFilter" onkeyup="ce.filter()" style="width:150px" />
                        </p:outputPanel>
                    </f:facet>

                    <p:column filterBy="#{ce.fullName}" 
                              headerText="Full Name"
                              filterMatchMode="contains">
                        <h:outputText value="#{ce.fullName}" />
                    </p:column>

                    <p:column filterBy="#{ce.department}"
                              headerText="Department">
                        <h:outputText value="#{ce.department}" />
                    </p:column>

                </p:dataTable>
                <p:commandButton value="Select" update="salesLeadForm" action="#{salesLeadManagerBean.updateCustomerExecutive}" oncomplete="ceDialog.hide()"/>
            </h:form>
        </p:dialog>

    </ui:define>

    <ui:define name="bottom">
       
    </ui:define>

</ui:composition>
